
import 'package:flutter/material.dart';

/// 静态图片
/// 
/// 文件 pubspec.yaml  内添加对应图片路径  
/// assets:
///   - assets/images/1.jpg
class Img extends StatelessWidget {
  const Img({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Img'),
      ),
      body: Row(
        children: [
          Img1(),
          Img2(),
          Img3(),
          Img4(),
        ],
      ),
    );
  }
}

class Img1 extends StatelessWidget {
  const Img1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 300,
      color: Colors.grey,
      child: Image.network(
        'https://img2024.cnblogs.com/blog/35695/202509/35695-20250923174722171-270282128.jpg',
        scale: 2.0, // 图片缩放比例 ，图片缩放比例，用于控制图片的缩放比例，默认值为 1.0
        fit: BoxFit.contain, // 图片填充模式 ，图片填充模式，用于控制图片在容器中的填充方式   
        alignment: Alignment.topLeft, // 图片对齐方式 ，图片对齐方式，用于控制图片在容器中的对齐方式
        semanticLabel: '图片', // 图片语义标签
        excludeFromSemantics: true, // 图片是否从语义树中排除 ，图片是否从语义树中排除，用于控制图片是否从语义树中排除，排除后图片不会影响语义树的 accessibility
        gaplessPlayback: true, // 图片加载完成后是否保持播放 ，图片加载完成后是否保持播放，用于控制图片加载完成后是否保持播放，保持播放可以避免图片加载完成后闪烁的问题
        cacheWidth: 200, // 图片缓存宽度
        cacheHeight: 200, // 图片缓存高度
        isAntiAlias: true, // 图片是否抗锯齿 ，图片是否抗锯齿，用于控制图片是否抗锯齿，抗锯齿可以使图片看起来更平滑
        filterQuality: FilterQuality.high, // 图片过滤质量 ，图片过滤质量，用于控制图片的质量和清晰度
        // color: Colors.red, // 图片颜色
        // colorBlendMode: BlendMode.darken, // 图片颜色混合模式，将图片颜色与容器颜色混合
        repeat: ImageRepeat.noRepeat, // 图片重复模式
        errorBuilder: (context, error, stackTrace) {
          return const Text('图片加载失败');
        },
        loadingBuilder: (context, child, loadingProgress) { //   
          if (loadingProgress == null) {
            return child;
          }
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                  : null,
            ),
          );
        },
        frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
          if (wasSynchronouslyLoaded) {
            return child;
          }
          return AnimatedOpacity(
            child: child,
            opacity: frame == null ? 0 : 1,
            duration: const Duration(seconds: 1),
            curve: Curves.easeOut,
          );
        },
      ),
    );
  }
}

// 圆形图片  Container + BorderRadius.circular
class Img2 extends StatelessWidget {
  const Img2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(75),
        image: DecorationImage(
          image: NetworkImage(
            'https://img2024.cnblogs.com/blog/35695/202509/35695-20250923174722171-270282128.jpg',
          ),
          fit: BoxFit.cover,
        ),
      ),
      child: null,
    );
  }
}

// 圆形图片  ClipOval
class Img3 extends StatelessWidget {
  const Img3({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Container(
        width: 150,
        height: 150,
        color: Colors.grey,
        child: Image.network(
          'https://img2024.cnblogs.com/blog/35695/202509/35695-20250923174722171-270282128.jpg',
          scale: 2.0, // 图片缩放比例 ，图片缩放比例，用于控制图片的缩放比例，默认值为 1.0
          fit: BoxFit.cover, // 图片填充模式 ，图片填充模式，用于控制图片在容器中的填充方式   
          alignment: Alignment.topLeft, // 图片对齐方式 ，图片对齐方式，用于控制图片在容器中的对齐方式
          semanticLabel: '图片', // 图片语义标签
        ),
      ),
    );
  }
}

class Img4 extends StatelessWidget {
  const Img4({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.grey,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Image.asset(
        'images/a.jpeg',
      ),
    );
  }
}

